<!DOCTYPE html>
<html>
<head>
	<title>通过HTML及CSS模拟报纸排版</title>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
	<div class="main">
		<!--头部-->
		<div class="header">
			<div class="header_top">
				<div class="title_left">baidu.com</div>
			</div>
			<div class="title_right">2016.04</div>
			<div class="clear"></div>
		</div>
		<!-- 第一部分 -->
		<div class="one_content">
			<div class="middle">
				<div class="middle_left"></div>
				<div class="middle_right"></div>
				<div class="clear"></div>
			</div>
			<div class="right_text">
				<p class="About">about</p>
				<p class="About" style="margin-top:-10px">technologe</p>
				<p class="detail">About technologe about technologe about technologe</p>
				<p class="seven">700</p>
				<div class="number">3.2</div>
				<div class="main_text">
					<p class="text_1">CSS</p>
					<p class="text_2">cssssccsccscssc</p>
				</div>
				<div class="clear"></div>
			</div>
			<div class="clear"></div>
		</div>
		<!-- 第二部分 -->
		<div class="two_content">
			<div class="midtext">
				<div class="midtext_font what">What</div>
				<p>鲁镇的酒店的格局，是和别处不同的：都是当街一个曲尺形的大柜台，柜里面预备着热水，可以随时温酒。做工的人，傍午傍晚散了工，每每花四文铜钱，买一碗酒，——这是二十多年前的事，现在每碗要涨到十文，——靠柜外站着，热热的喝了休息；倘肯多花一文，便可以买一碟盐煮笋，或者茴香豆，做下酒物了，如果出到十几文，那就能买一样荤菜，但这些顾客，多是短衣帮，大抵没有这样阔绰。只有穿长衫的，才踱进店面隔壁的房子里，要酒要菜，慢慢地坐喝。</p>
			</div>
			<div class="midtext">
				<div class="midtext_font when">When</div>
				<p>我从十二岁起，便在镇口的咸亨酒店里当伙计，掌柜说，样子太傻，怕侍候不了长衫主顾，就在外面做点事罢。外面的短衣主顾，虽然容易说话，但唠唠叨叨缠夹不清的也很不少。他们往往要亲眼看着黄酒从坛子里舀出，看过壶子底里有水没有，又亲看将壶子放在热水里，然后放心：在这严重监督下，羼水也很为难。所以过了几天，掌柜又说我干不了这事。幸亏荐头的情面大，辞退不得，便改为专管温酒的一种无聊职务了。</p>
			</div>
			<div class="midtext">
				<div>
					<div class="midtext_font how">How</div>
					<p>我从此便整天的站在柜台里，专管我的职务。虽然没有什么失职，但总觉得有些单调，有些无聊。掌柜是一副凶脸孔，主顾也没有好声气，教人活泼不得；只有孔乙己到店，才可以笑几声，所以至今还记得。</p>
				</div>
				<div class="re_bottom">
					<ul>
						<li>What--------<span>40%</span></li>
						<li>What--------<span>30%</span></li>
						<li>What--------<span>30%</span></li>
					</ul>
				</div>
			</div>
			<div class="clear"></div>
		</div>
		<!-- 第三部分 -->
		<div class="three_content">
			<div class="bo_left">
				<div class="bo_top">
					<p><span class="the">THE</span> TECHNOLOGE OF FRONT </p>
					<p><span class="tips_text">前端技术领域</span></p>
				</div>
				<div class="bo_text">
					<p><span class="kong">孔</span>乙己是站着喝酒而穿长衫的唯一的人。他身材很高大；青白脸色，皱纹间时常夹些伤痕；一部乱蓬蓬的花白的胡子。穿的虽然是长衫，可是又脏又破，似乎十多年没有补，也没有洗。他对人说话，总是满口之乎者也，教人半懂不懂的。<img src="img/pic3.png">因为他姓孔，别人便从描红纸上的“上大人孔乙己”这半懂不懂的话里，替他取下一个绰号，叫作孔乙己。孔乙己一到店，所有喝酒的人便都看着他笑，有的叫道，“孔乙己，你脸上又添上新伤疤了！”他不回答，对柜里说，“温两碗酒，要一碟茴香豆。”<p style="text-indent: 2em;">便排出九文大钱。他们又故意的高声嚷道，“你一定又偷了人家的东西了！”孔乙己睁大眼睛说，“你怎么这样凭空污人清白……”“什么清白？我前天亲眼见你偷了何家的书，吊着打。”孔乙己便涨红了脸，额上的青筋条条绽出，争辩道，“窃书不能算偷……窃书！……读书人的事，能算偷么？”接连便是难懂的话，什么“君子固穷”，什么“者乎”之类，引得众人都哄笑起来：店内外充满了快活的空气。</p><p style="text-indent: 2em;">听人家背地里谈论，孔乙己原来也读过书，但终于没有进学，又不会营生；于是愈过愈穷，弄到将要讨饭了。幸而写得一笔好字，便替人家钞钞书，换一碗饭吃。可惜他又有一样坏脾气，便是好喝懒做。坐不到几天，便连人和书籍纸张笔砚，一齐失踪。如是几次，叫他抄书的人也没有了。</p> </p>
				</div>
			</div>
			<div class="bo_right">
				<div class="br_top">
					<div class="rit_bottom">
						<p>前端技术<span>前端技术前端技术</span></p>
					</div>
				</div>
				<div class="br_bottom">
					<div class="list_top">
						<ul>
							<li>
								前端前端前端前端前端前端 ....................<span class="sp">前端</span>
							</li>
							<li>
								前端前端前端前端 ..........................<span class="sp">端前端</span>
							</li>
							<li>
								前端前端前端前端前端前端前端 ...............<span class="sp">前端</span>
							</li>
						</ul>
					</div>
					<div>
						<div class="brb_bottom">
							<div class="zero">0</div>
							<div class="zero-right">
								<p class="nums">ONE TWO THREE FOUR FIVE</p>
								<p class="hello">hello world hello world hello world</p>
							</div>
						</div>
						<div class="rr_text">
							<div class="left_span">“</div>
							<p class="low_style">hello world world hello world hello world hello world hello world hello world hello world hello world</p> 
							<div class="right_span">”</div>
						</div>
						<div class="clear"></div>
					</div>
				</div>
			</div>
			<div class="clear"></div>
		</div>
		<footer>
			<div class="footer_right">baidu.com</div>
			<div class="clear"></div>
		</footer>
	</div>
</body>
</html>